<template>
  <baseCard title="应用监控列表"
            :height="height">
    <template #right>
      <VptSelectBlock :defaultSelect="defaultTabs"
                      :tabList="tabOption"
                      @changeTab="changeTab"
                      :fontSize="'0.14rem'"
                      :height="'0.24rem'"></VptSelectBlock>
    </template>
    <arco-table :columns="columns"
             :data="tableData"
             :pagination="false"
             :scrollbar="true"
             :scroll="scroll"
             :rowClass="rowClassName"
             :hoverable="true"
             @row-click="rowClick">
      <template #app_name_zh_cn="{ record }">
        <div style="display: flex">
          <arco-tooltip :content="record.app_name_zh_cn"><span class="name-text">{{
              record.app_name_zh_cn
            }}</span></arco-tooltip>

          <vptPalnTag v-if="record.process_status == 2"
                      type="warn"
                      text="提示"
                      :tagStyle="{
              height: '0.25rem',
              background: '#FFC300',
              color: '#fff',
              fontSize: '0.12rem',
            }"></vptPalnTag>
          <vptPalnTag v-if="record.process_status == 1"
                      type="danger"
                      text="告警"
                      :tagStyle="{
              height: '0.25rem',
              background: '#F53F3F',
              color: '#fff',
              fontSize: '0.12rem',
            }"></vptPalnTag>
        </div>
      </template>
      <template #prompt="{ record }">
        <span class="vpt-em-organge">
          {{ addThousandsSeparator(record.prompt) }}
        </span>
      </template>
      <template #warning="{ record }">
        <span class="vpt-em-red">
          {{ addThousandsSeparator(record.warning) }}
        </span>
      </template>
      <template #memory_usage="{ record }">
        <span :style="{
            color:
              record.memory_usage >= 80
                ? '#f53f3f'
                : record.memory_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">{{ record.memory_usage }}</span>
      </template>
      <template #disk_usage="{ record }">
        <span :style="{
            color:
              record.disk_usage >= 80
                ? '#f53f3f'
                : record.disk_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">
          {{ record.disk_usage }}</span>
      </template>
      <template #cpu_usage="{ record }">
        <span :style="{
            color:
              record.cpu_usage >= 80
                ? '#f53f3f'
                : record.cpu_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">
          {{ record.cpu_usage }}</span>
      </template>
      <template #request_time_avg="{ record }">
        {{ addThousandsSeparator(record.request_time_avg) }}ms
      </template>
      <template #response_time="{ record }">
        {{ getCellValue(record.response_time) }}ms
      </template>
      <template #request_num_max="{ record }">
        {{ addThousandsSeparator(record.request_num_max) }}
      </template>
    </arco-table>
    <!-- <vptBaseTable1001
      :columns="columns"
      :dataList="tableData"
      :showPagination="false"
      :scrollbar="true"
      :scroll="scroll"
    > -->
    <!-- <template #cluster_name="{ rowIndex }">
        <div class="cell-content">
          <span>{{ rowIndex }}1111</span>
        </div>
      </template> -->
    <!-- </vptBaseTable1001> -->
  </baseCard>
</template>

<script setup>
import { ref, reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";
import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "" },
  chartType: { type: String, default: "init" },
  tableData: { type: Array, default: [] },
});

const tabOption = [
  { id: "0", name: "全部" },
  { id: "1", name: "告警" },
  { id: "2", name: "提示" },
  { id: "3", name: "正常" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const scroll = {
  y: "100%",
};

let columns = reactive([
  {
    title: "应用名称",
    slotName: "app_name_zh_cn",
    align: "left",
    width: 180,
  },
  {
    title: "容器组（pod）",
    width: 150,
    align: "center",
    children: [
      {
        title: "提示",
        tooltip: true,
        slotName: "prompt",
        align: "center",
        width: 70,
        cellClass: "ybbug",
      },
      {
        title: "告警",
        tooltip: true,
        slotName: "warning",
        align: "center",
        width: 70,
        cellClass: "zmbug",
      },
    ],
  },
  {
    title: "内存",
    slotName: "memory_usage",
    align: "center",
    width: 70,
  },
  {
    title: "储存资源",
    slotName: "disk_usage",
    align: "center",
    width: 70,
  },
  {
    title: "CPU",
    slotName: "cpu_usage",
    align: "center",
    width: 70,
  },
  {
    title: "平均响应时间",
    slotName: "request_time_avg",
    align: "center",
    width: 100,
  },
  {
    title: "响应时间（最大/最小）",
    slotName: "response_time",
    align: "center",
    width: 155,
  },
  {
    title: "峰值请求数",
    slotName: "request_num_max",
    align: "center",
    width: 80,
  },
]);

const rowClassName = (record, index) => {
  if (record.process_status == 2) {
    return "row-warn-status";
  } else if (record.process_status == 1) {
    return "row-danger-status";
  }
  return "";
};

const getCellValue = (value) => {
  var parts = value.split("/");
  parts = parts.map(function (item) {
    return addThousandsSeparator(item);
  });
  return parts.join("/");
};

const rowClick = (record, index) => {
  emit("row-click", record.cluster_name);
};

const emit = defineEmits(["changeTab", "row-click"]);
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");

:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    // border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}

.name-text {
  display: block;
  width: 1.4rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmbug .vpt-em-red {
  color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

// :deep(
//     .arco-table-hover:not(.arco-table-dragging)
//       .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
//   ) {
//   background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
//   background-size: 100% 98% !important;
// }
:deep(.arco-table-tr:hover) {
  background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 98% !important;
}

:deep(.arco-table-td) {
  background: none !important;
}
</style>
